<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 Tailwind css 样式库 -->
    <link
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <!--
    参考:
      1.  https://v1.tailwindcss.com/components/cards
      2.  https://v1.tailwindcss.com/components/flexbox-grids
   -->
  <body>
    <ul class="flex">
      <li class="w-1/4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg">
          <figure>
            <img class="w-full" src="./assets/gongzhu.jpeg" alt="" />
          </figure>
          <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">
              Lorem ipsum dolor sit amet.
            </div>
            <p class="text-gray-700 text-base">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
              voluptatum, voluptate, quibusdam, quia voluptas quod quos
              voluptatibus quae doloribus quas voluptatem. Quisquam voluptatum,
              voluptate, quibusdam, quia voluptas quod quos voluptatibus quae
              doloribus quas voluptatem.
            </p>
          </div>
        </div>
      </li>
      <li class="w-1/4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg">
          <figure>
            <img class="w-full" src="./assets/gongzhu.jpeg" alt="" />
          </figure>
          <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">
              Lorem ipsum dolor sit amet.
            </div>
            <p class="text-gray-700 text-base">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
              voluptatum, voluptate, quibusdam, quia voluptas quod quos
              voluptatibus quae doloribus quas voluptatem. Quisquam voluptatum,
              voluptate, quibusdam, quia voluptas quod quos voluptatibus quae
              doloribus quas voluptatem.
            </p>
          </div>
        </div>
      </li>
      <li class="w-1/4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg">
          <figure>
            <img class="w-full" src="./assets/gongzhu.jpeg" alt="" />
          </figure>
          <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">
              Lorem ipsum dolor sit amet.
            </div>
            <p class="text-gray-700 text-base">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
              voluptatum, voluptate, quibusdam, quia voluptas quod quos
              voluptatibus quae doloribus quas voluptatem. Quisquam voluptatum,
              voluptate, quibusdam, quia voluptas quod quos voluptatibus quae
              doloribus quas voluptatem.
            </p>
          </div>
        </div>
      </li>
      <li class="w-1/4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg">
          <figure>
            <img class="w-full" src="./assets/gongzhu.jpeg" alt="" />
          </figure>
          <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">
              Lorem ipsum dolor sit amet.
            </div>
            <p class="text-gray-700 text-base">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
              voluptatum, voluptate, quibusdam, quia voluptas quod quos
              voluptatibus quae doloribus quas voluptatem. Quisquam voluptatum,
              voluptate, quibusdam, quia voluptas quod quos voluptatibus quae
              doloribus quas voluptatem.
            </p>
          </div>
        </div>
      </li>
    </ul>
  </body>
</html>
